<!-- 问卷预览 todo 动态生成问卷调查数据，按照评分类型生成对应的样式以及layer二级弹窗显示问题 -->
<div style="overflow-y:auto;height: 650px">
    <form id="paper-preview-form" lay-filter="paper-preview-form" class="layui-form model-form layui-form-pane"
          style="margin-left: 50px">
        <div style="display: flex;justify-content: center;flex-direction: column;margin: 20px 0;text-align: center">
            <div style="font-size: 30px;font-weight: bold;margin-top: -30px">问卷调查</div>
            <div style="margin: 20px 0">问卷说明:此问卷采用匿名调查方式</div>
            <div style="font-size: 14px;color: black;font-weight: bold">截至日期:2021-3-1 00:00:00</div>
        </div>
        <div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"> 1.教练会经常结合实际项目授课吗?【单选题】<span class="layui-badge-dot"></span></label>
                <div class="layui-input-block">
                    <input type="radio" name="qutype" value="1" title="总是"/>
                    <input type="radio" name="qutype" value="2" title="通常"/>
                    <input type="radio" name="qutype" value="3" title="经常"/>
                    <input type="radio" name="qutype" value="3" title="有时"/>
                    <input type="radio" name="qutype" value="3" title="很少"/>
                    <input type="radio" name="qutype" value="3" title="从不"/>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"> 2.教练会经常查看你的日报吗?【单选题】<span class="layui-badge-dot"></span></label>
                <div class="layui-input-block">
                    <input type="radio" name="qutype1" value="1" title="总是"/>
                    <input type="radio" name="qutype1" value="2" title="通常"/>
                    <input type="radio" name="qutype1" value="3" title="经常"/>
                    <input type="radio" name="qutype1" value="3" title="有时"/>
                    <input type="radio" name="qutype1" value="3" title="很少"/>
                    <input type="radio" name="qutype1" value="3" title="从不"/>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"> 3.班主任会经常与你沟通吗？【单选题】<span class="layui-badge-dot"></span></label>
                <div class="layui-input-block">
                    <input type="radio" name="qutype2" value="1" title="总是"/>
                    <input type="radio" name="qutype2" value="2" title="通常"/>
                    <input type="radio" name="qutype2" value="3" title="经常"/>
                    <input type="radio" name="qutype2" value="3" title="有时"/>
                    <input type="radio" name="qutype2" value="3" title="很少"/>
                    <input type="radio" name="qutype2" value="3" title="从不"/>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"> 4.课外时间喜欢做些什么呢？【多选题】<span class="layui-badge-dot"></span></label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like1[write]" lay-skin="primary" value="write" title="写作">
                    <input type="checkbox" name="like1[read]" lay-skin="primary" value="read" title="阅读">
                    <input type="checkbox" name="like1[game]" lay-skin="primary" value="game" title="游戏">
                    <input type="checkbox" name="like1[game]" lay-skin="primary" value="game" title="音乐">
                    <input type="checkbox" name="like1[game]" lay-skin="primary" value="game" title="运动">
                    <input type="checkbox" name="like1[game]" lay-skin="primary" value="game" title="学习">
                </div>
            </div>
        </div>
        <div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"> 5.未来3-5年的规划？【主观题】<span class="layui-badge-dot"></span></label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">综合评分<span class="layui-badge-dot"></span></label>
                <!--星数-->
                <div id="rate-type">
                    <div style="margin-top: 10px">
                        <div style="font-size: 10px;color: gray">说明:【1/2/3/4/5星】分别对应【不及格/继续努力/中等/良好/优秀】</div>
                        <div id="score"></div>
                    </div>
                    <!--滑块-->
                      <div style="margin-top: 20px">
                          <div style="font-size: 10px;color: gray;margin-bottom: 20px">
                              说明:【0-20/20-40/40-60/60-80/80-100/】分别对应【不及格/继续努力/中等/良好/优秀】
                          </div>
                          <div id="slide-score" class="demo-slider"></div>
                      </div>
                    <!--等级-->
                      <div style="margin-top: 20px">
                          <div style="font-size: 10px;color: gray">说明:【A/B/C/D/E】分别对应【优秀/良好/中等/继续努力/不及格】</div>
                          <input type="radio" name="score" value="A" title="A"/>
                          <input type="radio" name="score" value="B" title="B"/>
                          <input type="radio" name="score" value="C" title="C"/>
                          <input type="radio" name="score" value="D" title="D"/>
                          <input type="radio" name="score" value="E" title="E"/>
                      </div>
                </div>
            </div>
        </div>
        <!--建议-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">您的建议<span class="layui-badge-dot"></span></label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" id="edit"></textarea>
            </div>
        </div>
        <div class="layui-form-item model-form-footer">
            <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">关闭</button>
        </div>
    </form>
</div>
<script>
    layui.use(['layer', 'admin', 'form', 'rate', 'slider', 'tinymce'], function () {
        let layer = layui.layer;
        let admin = layui.admin;
        let form = layui.form;
        let rate = layui.rate;
        let slider = layui.slider;
        let tinymce = layui.tinymce;

        form.render();

        //星数
        rate.render({
            elem: '#score'
            , value: 0
            , text: true
            , setText: function (value) { //自定义文本的回调
                let arrs = {
                    '0': '请打分'
                    , '1': '不及格'
                    , '2': '继续努力'
                    , '3': '中等'
                    , '4': '良好'
                    , '5': '优秀'
                };
                this.span.text(arrs[value] || (value + "星"));
            }
        });

        //滑块
        slider.render({
            elem: '#slide-score'
            , input: true
            , theme: '#1E9FFF'
            , value: 60
        });

        //富文本 todo 二级弹窗显示问题
        tinymce.render({
            elem: "#edit"
            ,height: 400
            ,toolbar: ['undo | redo | removeformat | bold | italic | underline | strikethrough | alignleft ' +
            '| aligncenter | alignright | alignjustify | subscript | superscript ' +
            '| bullist | numlist | outdent | indent | blockquote | cut | copy | paste']
            ,menubar: false //隐藏菜单栏
            // 支持tinymce所有配置
        }, (opt, edit) => {
            // 加载完成后回调 opt 是传入的所有参数
            // edit是当前编辑器实例，等同于t.get返回值
        });
    });
</script>
